<html>
	<head>
		<meta charset="utf-8">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
		<script src="../src/jquery.maskMoney.js" type="text/javascript"></script>

		<!-- just necessary for syntax highlight -->
		<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css' />
		<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css' />
		<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
		<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
		<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
		<style type="text/css">
			body { font-family: helvetica, sans-serif; }
			h1 { font-size: 2em;}
			h4 {font-weight: 100; }
			h4 code { background-color: whitesmoke; }
		</style>
	</head>
	<body>
		<h1>jQuery-maskMoney examples</h1>

		<p>jQuery plugin to mask data entry in the input text in the form of money (currency). <a href="https://github.com/plentz/jquery-maskmoney">Project home @ github</a></p>
		<input type="text" id="demo1" value="0.01" />
		<script type="text/javascript">$("#demo1").maskMoney();</script>
		<pre class="brush: js">$("#demo1").maskMoney();</pre>

		<input type="text" id="demo2" />
		<script type="text/javascript">$("#demo2").maskMoney({thousands:',', decimal:'.', allowZero: true, suffix: ' €'});</script>
		<pre class="brush: js">$("#demo2").maskMoney({thousands:'', decimal:'.', allowZero:true, suffix: ' €'});</pre>

		<input type="text" id="demo3" />
		<script type="text/javascript">$("#demo3").maskMoney({prefix:'R$ ', allowNegative: true, thousands:'.', decimal:',', affixesStay: false});</script>
		<pre class="brush: js">$("#demo3").maskMoney({prefix:'R$ ', allowNegative: true, thousands:'.', decimal:',', affixesStay: false});</pre>

		<input type="text" id="demo4" data-thousands="." data-decimal="," data-prefix="R$ " />
		<script type="text/javascript">$("#demo4").maskMoney();</script>
		<pre class="brush: js">$("#demo4").maskMoney();</pre>
		<pre class="brush: html"><input type="text" id="demo4" data-thousands="." data-decimal="," data-prefix="R$ " /></pre>

		<input type="text" id="demo5" value="1234567.89"/>
		<script type="text/javascript">$("#demo5").maskMoney({prefix:'R$ ', thousands:'.', decimal:',', affixesStay: true});</script>
		<input type="button" onclick="$('#demo5').maskMoney('mask')" value="trigger mask event at demo5"/>
		<pre class="brush: js">$("#demo5").maskMoney('mask');</pre>

		<input type="text" id="demo6"/>
		<script type="text/javascript">$("#demo6").maskMoney({prefix:'R$ ', thousands:'.', decimal:',', affixesStay: true});</script>
		<input type="button" onclick="$('#demo6').maskMoney('mask', 1999.99)" value="trigger mask event at demo6, passing a float value as parameter"/>
		<pre class="brush: js">$("#demo6").maskMoney('mask', 1999.99);</pre>

		<input type="text" id="demo7"/>
		<script type="text/javascript">$("#demo7").maskMoney();</script>
		<input type="button" onclick="$('#demo7').maskMoney('destroy')" value="remove maskmoney from demo7"/>
		<pre class="brush: js">$("#demo6").maskMoney('destroy');</pre>

		<input type="text" id="demo8" value="R$ 1.231.231,23"/>
		<script type="text/javascript">$("#demo8").maskMoney();</script>
		<input type="button" onclick="var num = $('#demo8').maskMoney('unmasked')[0];alert('type: '+typeof(num) + ', value: ' + num)" value="alert unmasked value and type from demo7"/>
		<pre class="brush: js">
			var num = $('#demo8').maskMoney('unmasked')[0];
			alert('type: '+ typeof(num) + ', value: ' + num)
		</pre>

		<input type="text" id="demo9" value="$15.45" />
		<script type="text/javascript">
			$("#demo9").maskMoney({ formatOnBlur: true, prefix: '$' });
		</script>
		<pre class="brush: js">$("#demo9").maskMoney({ formatOnBlur: true, prefix: '$' });</pre>

		<input type="text" id="demo10" value="$15.45" />
		<script type="text/javascript">
			$("#demo10").maskMoney({  formatOnBlur: true, reverse: true, prefix: '$' });
		</script>
		<h4>Note: The <code>reverse</code> option is meant to be used with the <code>formatOnBlur</code> option.</h4>
		<pre class="brush: js">
			$("#demo10").maskMoney({ formatOnBlur: true, reverse: true, prefix: '$' });
		</pre>

		<input type="text" id="demo11" value="45.55" />
		<script type="text/javascript">
			$("#demo11").maskMoney({ selectAllOnFocus: true });
		</script>
		<pre class="brush: js">$("#demo11").maskMoney({ selectAllOnFocus: true });</pre>
		
		<input type="text" id="demo12" value=""/>
		<script type="text/javascript">$("#demo12").maskMoney({ formatOnBlur: true, reverse: true, prefix: '$', selectAllOnFocus: true });</script>
		<input type="button" onclick="var num = $('#demo12').maskMoney('applyMask', $('#demo12').val());alert('Mask applied '+ num)" value="alert masked value from demo12"/>
		<pre class="brush: js">
			$("#demo12").maskMoney({ formatOnBlur: true, reverse: true, prefix: '$', selectAllOnFocus: true });
			var num = $('#demo12').maskMoney('applyMask', $('#demo12').val());
			alert('Mask applied '+ num);
		</pre>

		<input type="text" id="demo13" value="45" />
		<script type="text/javascript">
			$("#demo13").maskMoney({ formatOnBlur: true, reverse: true, prefix: '$', selectAllOnFocus: true, precision: 0 });
		</script>
		<pre class="brush: js">$("#demo13").maskMoney({ formatOnBlur: true, reverse: true, prefix: '$', selectAllOnFocus: true, precision: 0 });</pre>

		<input type="text" id="demo14" value="" />
		<script type="text/javascript">
			$("#demo14").maskMoney({ formatOnBlur: true, reverse: true, prefix: '$', selectAllOnFocus: true, precision: 4, allowEmpty: true });
		</script>
		<pre class="brush: js">$("#demo14").maskMoney({ formatOnBlur: true, reverse: true, prefix: '$', selectAllOnFocus: true, precision: 4, allowEmpty: true });</pre>

	</body>
	<script type="text/javascript">
		SyntaxHighlighter.all()
	</script>
</html>
